<template>



  <div class="movie-gallery" v-if="updatedMovieGallery.length > 0">

    <div class="title">剧照</div>
    <div class="all" @click="gotoAllPhotos">全部{{ galleryNumber }}张<van-icon name="arrow" /></div>
  </div>

  <div class="swipe">

    <ul class="gallery">
      <li v-for="(gallery, index) in updatedMovieGallery" :key="index">
        <img class="thumb" :src="gallery" @click="previewImage(gallery)" />
      </li>
    </ul>
  </div>


</template>

<script setup>
import { updateVideoGalleryImageUrl } from "@/tools/index.js"
import { computed } from 'vue';

import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();

const props = defineProps({
  movieGallery: {
    type: Object
  }
});

const updatedMovieGallery = computed(() => {
  return props.movieGallery.photos.map(gallery => updateVideoGalleryImageUrl(gallery));
});

const galleryNumber = computed(() => {
  return props.movieGallery.pn
})

const previewImage = (gallery) => {
  showImagePreview([gallery])

};

const movieId = computed(() => {

  return route.params.movieId


})


const gotoAllPhotos = () => {

  router.push({ path: `/movie/${movieId.value}/photos/` })

};


</script>















<style scoped>
.movie-gallery {
  margin-top: 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
}

.movie-gallery .title {
  font-size: 15px;
}

.movie-gallery .all {
  cursor: pointer;
  font-size: 12px;
}

.swipe {
  margin-top: 10px;
}



.gallery {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  justify-content: flex-start;
  align-items: center;
  overflow-x: scroll;
  -ms-overflow-style: none;
  /* IE 和 Edge  隐藏滚动条 */
  scrollbar-width: none;
  /* Firefox 隐藏滚动条*/
}

.gallery::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari 和 Opera 隐藏滚动条 */
}


.gallery li {
  margin-right: 10px;
  text-align: center;
  /* width: 80px; */
  /* height: 112px; */
}

.gallery li .thumb {
  cursor: pointer;
  width: 140px;
  height: 93px;
}
</style>
